<template>
  <div id="home">
    <div id="content">
      <HomeMusicTop></HomeMusicTop>
      <div style="display: flex;"> 
        <MusicAsideBar></MusicAsideBar>
        <div style="display: flex; flex-direction:column;">
          <HomeRouteContent></HomeRouteContent>
          <HomePlayBar></HomePlayBar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {updatauser} from '../network/profile'
import HomeMusicTop from '../views/homeMusicTop/HomeMusicTop.vue'
import MusicAsideBar from '../views/musicAside/MusicAsideBar.vue'
import HomeRouteContent from './homeRouteContent/HomeRouteContent.vue'
import HomePlayBar from './homePlayBar/HomePlayBar.vue'

export default {
  name: 'Home',
  data: {
    abc: 1111
  },
  components: {
    HomeMusicTop,
    MusicAsideBar,
    HomeRouteContent,
    HomePlayBar
  },
  watch: {
    /**
     * 监听用户登录状态进行用户数据请求
     */
    '$store.state.profile.userstate':{
      immediate:true,
      handler(val) {
        console.log(val,"++");
        if (val == 1) {
          console.log("登录成功");
          this.$store.dispatch("getplaylist");                //获取+存储----用户歌单
          this.$store.dispatch("getlikelistid")               //获取+存储 -----用户喜欢的音乐ID
        }else console.log("无用户登录");
      }
    }
  },
  created() {
    //查看用户登录状态api，是否cookie存在正确等
    this.$store.dispatch("getuserinfoapi").then(res => {
      if (res.profile) {
        this.$store.commit("UserState",1)
      }else this.$store.commit("UserState",0);

    })
  }
}
</script>

<style>
#home {
  width: 100vw;
  height: 100vh;

  /** 居中设置 */
  display: flex;
  justify-content:center;
  align-items:center;
}
#content {
  width: 75vw;
  height: 75vh;
  background-color: rgb(255, 255, 255);
  border-radius: 1rem;
  box-shadow: 0px 0px 10px 1px;
}
</style>